<script setup lang="ts">
import { computed } from "vue";
import { Direction, Offset, PriceType } from "@/types/trade.types";

defineOptions({ name: "order-confirm-dialog" });

const props = defineProps<{
  order: {
    symbol: string;
    exchange: string;
    direction: Direction;
    offset: Offset;
    price: number;
    price_type: PriceType;
    volume: number;
    trade_app_name: string;
  };
  account_name: string;
}>();

const colorForDirection = computed(() =>
  props.order.direction === Direction.LONG
    ? "text-red-600 bg-red-50 border-red-200"
    : "text-green-600 bg-green-50 border-green-200"
);

// Display logic: if 限价 show number, otherwise show price type text
const priceText = computed<string>(() => {
  return props.order.price_type === PriceType.LIMIT
    ? props.order.price.toString()
    : props.order.price_type;
});
</script>

<template>
  <div class="space-y-3">
    <div class="rounded-md bg-gradient-to-r from-slate-50 to-slate-100 p-3">
      <div class="flex-ac">
        <div class="flex flex-wrap items-baseline gap-2">
          <div class="font-mono text-base font-bold">
            {{ props.order.symbol }}
          </div>
          <div class="font-mono text-xs text-gray-500">
            {{ props.order.exchange }}
          </div>
        </div>
        <div class="font-mono text-xl text-gray-700">
          {{ props.order.volume }}手
        </div>
      </div>
    </div>

    <div class="grid grid-cols-2 gap-2">
      <div :class="colorForDirection" class="rounded-md border p-3">
        <div class="text-xs text-gray-500">方向</div>
        <div class="flex items-center gap-2 font-mono text-lg font-semibold">
          {{ props.order.direction }}{{ props.order.offset }}
        </div>
      </div>

      <div class="rounded-md border border-gray-300 p-3">
        <div class="text-xs text-gray-500">价格</div>
        <div class="font-mono text-lg font-semibold">
          {{ priceText }}
        </div>
      </div>
    </div>

    <div class="mb-3 rounded-md bg-slate-50 p-3 text-xs text-gray-500">
      请确认以上委托信息，确认后将立即提交。
    </div>
  </div>
</template>
